import Page from "@/components/page"
import { gql, useMutation, useQuery } from "@apollo/client"
import getSelfGoodsForm from "./getSelfGoodsForm"
import UiButton from "@/components/ui/UiButton"
import UiFormButton from "@/components/ui/UiFormButton"
import { useCallback, useMemo } from "react"
import { GoodsEntity, GoodsFields } from "@/interfaces/GoodsEntity"
import { AddGoodsMutation, UpdGoodsMutation, DelGoodsMutation } from "@/queries/goods"
import { openModal } from "@/components/ui/UiModal"
import { fileShear } from "@/libs/img"


const GetSelfGoodsQuery = gql`
    query GetSelfGoods{
        getSelfGoods{
            ${GoodsFields}
        }
    }
`
const GetSelfShopDetialQuery = gql`
    query GetSelfShopDetial{
        getSelfShopDetial{
            id
        }
    }
`
const GoodsMinePage = () => {
    const { data, refetch } = useQuery(GetSelfGoodsQuery)
    const goodsList: GoodsEntity[] = useMemo(() => data?.getSelfGoods || [], [data]);
    const { data: SelfShopQuery } = useQuery(GetSelfShopDetialQuery)
    const shopId = useMemo(() => SelfShopQuery?.getSelfShopDetial.id || 0, [SelfShopQuery]);
    const [add] = useMutation(AddGoodsMutation, {
        onCompleted() {
            refetch()
        }
    })
    const [upd] = useMutation(UpdGoodsMutation, {
        onCompleted() {
            refetch()
        }
    })
    const [del] = useMutation(DelGoodsMutation, {
        onCompleted() {
            refetch()
        }
    })
    const onFinish = useCallback(async (variables: any) => {
        variables.avatar = await fileShear(variables.avatar, 100, 100);
        variables.price = Math.floor(Number(variables.price) * 100)
        variables.status = Number(variables.status)
        variables.shopId = Number(variables.shopId)
        variables.shopId = shopId
        return await add({ variables }).then(() => "").catch((e) => e.message)
    }, [shopId])

    const onUpdate = useCallback(async (id: number, variables: any) => {
        if (!!variables.avatar) variables.avatar = await fileShear(variables.avatar, 100, 100);
        variables.price = Math.floor(Number(variables.price) * 100)
        variables.status = Number(variables.status)
        variables.shopId = Number(variables.shopId)
        variables.id = id
        console.log(11233)
        return await upd({ variables }).then(() => "").catch((e) => e.message)
    }, [])
    const onDelete = useCallback((id: number) => {
        openModal(() => ({
            title: "删除后无法恢复，确认要删除吗？",
            onOk() {
                del({ variables: { id } })
                return true;
            },
        }))
    }, []);
    return (
        <Page>
            <div className="card m-2 bg-base-100 shadow-xl">
                <table className="table text-center">
                    <thead>
                        <tr>
                            <th className="flex justify-center">
                                <UiFormButton
                                    form={getSelfGoodsForm()}
                                    onFinish={onFinish}
                                    btnProps={{
                                        text: "添加菜单",
                                    }}
                                />
                            </th>
                            <th>标题</th>
                            <th>分类</th>
                            <th>描述</th>
                            <th>价格</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {goodsList.map((item) => {
                            const {
                                id,
                                shop,
                                name,
                                information,
                                price,
                                status,
                                hash_key,
                                menu
                            } = item
                            const shopName = shop?.name
                            return (
                                <tr key={id}>
                                    <td>
                                        <img src={`${process.env.REACT_APP_BASE_URL}/media/goods/${hash_key}/avatar`} />
                                    </td>
                                    <td>{name}</td>
                                    <td>{menu}</td>
                                    <td>{information}</td>
                                    <td>￥{price / 100}</td>
                                    <td>{status ? "正常" : "售罄"}</td>
                                    <td>
                                        <UiFormButton
                                            form={getSelfGoodsForm(item)}
                                            onFinish={onUpdate.bind(null, id)}
                                            btnProps={{
                                                text: "修改",
                                            }}
                                        />
                                        <UiButton
                                            onClick={onDelete.bind(null, id)}
                                        >
                                            删除
                                        </UiButton>
                                    </td>
                                </tr>
                            )
                        })}
                    </tbody>
                </table>
            </div>
        </Page>
    )
}
export default GoodsMinePage